<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tree</title>
    <!-- <script src="js/d3@7.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

</head>

<body>
    <input type="text" id="searchBox" class="search-box" placeholder="Search...">
    <button id="updateButton" onclick="performSearch()">更新树形图</button>
    <svg width="1000" height="700"></svg>

</body>

<script>
    let data = {
        "id": "0_0",
        "title": "公司",
        "content": "公司信息",
        "children": [
            {
                "id": "1_1",
                "title": "管理层",
                "content": "管理层信息",
                "children": [
                    {
                        "id": "1_1_1",
                        "title": "首席执行官",
                        "content": "首席执行官信息",
                        "children": [
                            {
                                "id": "1_1_1_1",
                                "title": "助理",
                                "content": "助理信息",
                                "parentId": "1_1_1"
                            },
                            {
                                "id": "1_1_1_2",
                                "title": "秘书",
                                "content": "秘书信息",
                                "parentId": "1_1_1"
                            }
                        ],
                        "parentId": "1_1"
                    },
                    {
                        "id": "1_1_2",
                        "title": "首席财务官",
                        "content": "首席财务官信息",
                        "children": [
                            {
                                "id": "1_1_2_1",
                                "title": "会计部",
                                "content": "会计部信息",
                                "parentId": "1_1_2"
                            },
                            {
                                "id": "1_1_2_2",
                                "title": "财务分析师",
                                "content": "财务分析师信息",
                                "parentId": "1_1_2"
                            }
                        ],
                        "parentId": "1_1"
                    }
                ],
                "parentId": "0_0"
            },
            {
                "id": "1_2",
                "title": "技术部",
                "content": "技术部信息",
                "children": [
                    {
                        "id": "1_2_1",
                        "title": "研发部",
                        "content": "研发部信息",
                        "children": [
                            {
                                "id": "1_2_1_1",
                                "title": "软件开发",
                                "content": "软件开发信息",
                                "children": [
                                    {
                                        "id": "1_2_1_1_1",
                                        "title": "前端开发",
                                        "content": "前端开发信息",
                                        "parentId": "1_2_1_1"
                                    },
                                    {
                                        "id": "1_2_1_1_2",
                                        "title": "后端开发",
                                        "content": "后端开发信息",
                                        "parentId": "1_2_1_1"
                                    }
                                ],
                                "parentId": "1_2_1"
                            },
                            {
                                "id": "1_2_1_2",
                                "title": "硬件开发",
                                "content": "硬件开发信息",
                                "parentId": "1_2_1"
                            }
                        ],
                        "parentId": "1_2"
                    },
                    {
                        "id": "1_2_2",
                        "title": "运维部",
                        "content": "运维部信息",
                        "children": [
                            {
                                "id": "1_2_2_1",
                                "title": "网络运维",
                                "content": "网络运维信息",
                                "parentId": "1_2_2"
                            },
                            {
                                "id": "1_2_2_2",
                                "title": "系统运维",
                                "content": "系统运维信息",
                                "parentId": "1_2_2"
                            }
                        ],
                        "parentId": "1_2"
                    }
                ],
                "parentId": "0_0"
            },
            {
                "id": "1_3",
                "title": "市场部",
                "content": "市场部信息",
                "children": [
                    {
                        "id": "1_3_1",
                        "title": "市场分析",
                        "content": "市场分析信息",
                        "parentId": "1_3"
                    },
                    {
                        "id": "1_3_2",
                        "title": "广告宣传",
                        "content": "广告宣传信息",
                        "children": [
                            {
                                "id": "1_3_2_1",
                                "title": "社交媒体",
                                "content": "社交媒体信息",
                                "parentId": "1_3_2"
                            },
                            {
                                "id": "1_3_2_2",
                                "title": "传统媒体",
                                "content": "传统媒体信息",
                                "parentId": "1_3_2"
                            }
                        ],
                        "parentId": "1_3"
                    }
                ],
                "parentId": "0_0"
            }
        ],
        "parentId": null
    }  //数据

    var margin = 120;
    var svg = d3.select("svg");
    var width = svg.attr("width");
    var height = svg.attr("height");

    var g = svg.append("g")
        .attr("transform", "translate(" + margin + "," + margin + ")");
    function drawTree(data) {
        g.selectAll('*').remove();
        var hierarchyData = d3.hierarchy(data)
        var tree = d3.tree()
            .size([width - 400, height - 200])
            .separation(function (a, b) {
                return (a.parent == b.parent ? 1 : 2) / a.depth;
            });
        var treeData = tree(hierarchyData)

        //获取边和节点
        var nodes = treeData.descendants();
        var links = treeData.links();

        //创建贝塞尔曲线生成器
        var link = d3.linkHorizontal()
            .x(function (d) { return d.y; })
            .y(function (d) { return d.x; });


        //绘制边
        g.append('g')
            .selectAll('path')
            .data(links)
            .enter()
            .append('path')
            .attr('d', function (d, i) {
                var start = { x: d.source.x, y: d.source.y };
                var end = { x: d.target.x, y: d.target.y };
                return link({ source: start, target: end });
            })
            .attr('stroke', 'pink')
            .attr('stroke-width', 1)
            .attr('fill', 'none');


        //创建节点与文字分组
        var gs = g.append('g')
            .selectAll('.g')
            .data(nodes)
            .enter()
            .append('g')
            .attr('transform', function (d, i) {
                return 'translate(' + d.y + ',' + d.x + ')';

            });


        //绘制文字和节点
        gs.append('circle')
            .attr('r', 10)
            .attr('fill', 'blue')
            .attr('stroke-width', 1)
            .attr('stroke', 'pink');


        gs.append('text')
            .attr('x', function (d, i) {
                return d.children ? -85 : 10;
            })
            .attr('y', -5)
            .attr('dy', 10)
            .text(function (d, i) {
                return d.data.title
            })

    }
    drawTree(data)
    function performSearch() {
        const query = document.getElementById('searchBox').value;
        if (query) {
            console.log("更新树数据", data);
            let filteredData = filterDataByKeyword(data, query);
            console.log("🚀 ~ filteredData:", filteredData)
            if (filteredData) {
                drawTree(filteredData);
            } else {
                g.selectAll('*').remove();
                console.log("没有匹配的数据");
            }
        } else {
            drawTree(data);
        }
    }
    function filterDataByKeyword(node, keyword) {
        // console.log("🚀 ~ filterDataByKeyword ~ node:", node)
        if (node.title.includes(keyword)) {
            return node;
        }
        if (!node.children) {
            return null;
        }
        let filteredChildren = node.children.map(child => filterDataByKeyword(child, keyword)).filter(child => child !== null);
        // console.log("🚀 ~ filterDataByKeyword ~ filteredChildren:", filteredChildren)
        if (filteredChildren.length > 0) {
            return {
                ...node,
                children: filteredChildren
            };
        }
        return null;
    }

    // function filterDataByKeyword(node, keyword) {
    //     if (!node.children) {
    //         return node.content.includes(keyword) ? node : null;
    //     }

    //     let filteredChildren = node.children.map(child => filterDataByKeyword(child, keyword)).filter(child => child !== null);

    //     if (filteredChildren.length > 0 || node.content.includes(keyword)) {
    //         return {
    //             ...node,
    //             children: filteredChildren
    //         };
    //     }
    //     return null;
    // }


    // function filterDataByKeyword(node, keyword) {
    //     const results = [];

    //     function search(node, keyword) {
    //         if (node.title.includes(keyword) || node.content.includes(keyword)) {
    //             results.push(node);
    //         }
    //         if (node.children) {
    //             node.children.forEach(child => search(child, keyword));
    //         }
    //     }
    //     search(node, keyword);
    //     console.log("🚀 ~ filterDataByKeyword ~ results:", results)
    //     return results;
    // }


</script>

</html>